<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
import {showToast} from 'vant';
import headerUtil from "./base/common/headerUtil.vue";
import reqApis from "../req/reqApis.js";


const currentData = ref<any>({
  headerObj:{
      showType: 2
    },
    showMoney: false,
    user: {},
    currentBalance: 0,
    showCenter: false,
    productList: [],
});

const getProductsFn = () => {
  reqApis.getProductsApi({type: 0}).then(res => {
    currentData.value.productList = res.data.payProductItemVOList;
  }).catch(err => {

  })
};



const getUserFn = () => {
  reqApis.getCurrentUserApi({}).then(res => {
    currentData.value.user = res.data;
    currentData.value.currentBalance =  currentData.value.user.currentBalance;
  })
};

const playFn = (productObj:any) =>{
  let params = {
    productId: productObj.id,
    payChannel: 1, 
    paySource: 1
  }
  reqApis.payProductApi(params).then(res => {
    showToast('充值成功');
      getUserFn();
  }).catch(err => {

  });
};

getUserFn();
getProductsFn();

</script>

<template>
  <section class="balanceWrap">
    <headerUtil :obj="currentData.headerObj">余额</headerUtil>
    <div class="content">
      <div class="balance">
        <div class="descWrap">
          <div class="desc">可用余额(元)<div class="is-show" :class="{'show':currentData.showMoney, 'close': !currentData.showMoney}" @click="currentData.showMoney = !currentData.showMoney"></div></div>
        </div>
        <div>
          <div class="money" >
            <div v-if="currentData.showMoney">{{currentData.currentBalance}}</div>
            <div v-else>****</div>
          </div>
        </div>
        <div class="btnWrap">
          <div class="btn1">提现</div>
          <div class="btn2" @click="currentData.showCenter = true">充值</div>
        </div>
      </div>
      
    </div>
    <van-popup v-model:show="currentData.showCenter" round  >
      <div class="recharge">
        <div class="item" @click="playFn(item)" v-for="(item, index) in currentData.productList" :key="index">
          <div class="glod"><div class="glod-cion"></div>{{item.name}}</div>
          <div class="rmb"> ¥ {{item.coinNum}}</div>
        </div>
      </div>
      
      </van-popup>
  </section>
</template>

<style lang="less" scoped>
.balanceWrap {
  width: 3.75rem;
  height: 100%;
  // background: white;
  display: flex;
  flex-direction: column;
  .recharge {
    width: 3rem;
    height: 6rem;
    padding: .1rem;
    .item {
      width: 1.3rem;
      height: .7rem;
      border: 1px solid #f8f8f8;
      background: linear-gradient(40deg, #f5cccc, #f9efed);
      border-radius: .1rem;
      float: left;
      margin-bottom: .1rem;
      padding: .1rem;

      &:nth-of-type(2n) {
        float: right;
      }
      .glod {
        display: flex;
        font-size: .18rem;
        align-items: center;
        margin-bottom: .1rem;
        .glod-cion {
          margin-right: .1rem;
          width: .24rem;
          height: .24rem;
          background-size: contain !important;
          background: url("../assets/images/glod-icon.png") no-repeat center;
        }
      }
      .rmb {
        text-align: center;
        font-size: .12rem;
      }
    }
  }
  .content {
    padding: .1rem;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
        display: none;
    }
    .balance {
      background: white;
      padding-top: .1rem;
      text-align: center;
      .descWrap {
        padding: .1rem;
        font-size: .16rem;
        display: flex;
        align-items: center;
        justify-content: center;
        .desc {
          position: relative;
          .is-show {
            position: absolute;
            right: -0.34rem;
            top: -0.03rem;
            width: .24rem;
            height: .24rem;
            background-size: contain !important;
            &.show {
              background: url("../assets/images/show-icon-2.png") no-repeat center;
            }
            &.close {
              background: url("../assets/images/show-icon-1.png") no-repeat center;
            }
          }

        }
      }
      .btnWrap {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .1rem;
        .btn1 {
            width: 1.2rem;
            height: .35rem;
            line-height: .35rem;
            border: 1px solid #ccc;
            font-size: .16rem;
            border-radius: .2rem;
            margin: 0 0.1rem 0;
        }
        .btn2 {
            width: 1.2rem;
            height: .35rem;
            line-height: .35rem;
            border: 1px solid #dc362e;
            font-size: .16rem;
            border-radius: .2rem;
            margin: 0 0.1rem 0;
            color: white;
            background: linear-gradient(90deg, #eb3c3c, #ff7459);
        }
      }
      .money {
        padding: .1rem;
        font-size: .30rem;
        font-weight: 700;
      }
    }
  }

}
</style>
